import React, { useState } from 'react';
import { Button, message } from 'antd';

import services from '../../../services/api';
import CheckLists from '../../../components/CheckLists';
import { APIUrl } from '../../../services/createServices';

export default function Export(props) {
  const [base, setBase] = useState([]);
  const [business, setBusiness] = useState([]);

  function handleChangeBase(value) {
    setBase(value);
  }

  function handleChangeBusiness(value) {
    setBusiness(value);
  }

  function exportNow() {
    const params = {
      base_data:
        props.base_data.filter(item => base.includes(item.code)).length > 0
          ? JSON.stringify(props.base_data.filter(item => base.includes(item.code)))
          : '',
      business_data:
        props.business_data.filter(item => business.includes(item.code)).length > 0
          ? JSON.stringify(props.business_data.filter(item => business.includes(item.code)))
          : '',
      req_ids: props.reqIds,
      is_contain_all: 0,
      app_id: props.app_id,
      event_id: props.event_id
    };
    services.eventMonitor.handleData(params).then(res => {
      if (res.code === 0) {
        const url = `${APIUrl}/event-monitor/export-data?condition_key=${res.data}`;
        window.open(url, '_blank');
        props.closeModal && props.closeModal();
      } else {
        message.warning(res.msg);
      }
    });
  }

  return (
    <div>
      <p>请选择导出的数据</p>
      <CheckLists title={'基本数据'} options={props.base_data} onChange={handleChangeBase} />
      <CheckLists title={'业务数据'} options={props.business_data} onChange={handleChangeBusiness} />
      <div className='form-btn'>
        <Button type='primary' className='login-form-button' onClick={() => exportNow()}>
          确定
        </Button>
        <Button className='login-form-button' onClick={() => props.closeModal()} style={{ marginLeft: '10px' }}>
          取消
        </Button>
      </div>
    </div>
  );
}
